<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/21
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>

<head>
    <title>Title</title>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="recordAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加修缮记录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/recordController/addRecord" method="post">
                    <%--<div class="form-group">
                        <label for="houseArea_add_input" class="col-sm-2 control-label">houseArea</label>
                        <div class="col-sm-10">
                            <input type="text" name="houseArea" class="form-control" id="houseArea_add_input" placeholder="houseArea">
                        </div>
                    </div>--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">houseRoomno</label>
                        <div class="col-sm-10">
                            <input type="text" name="houseRoomno" class="form-control" id="houseRoomno_add_input" placeholder="houseRoomno">
                        </div>
                    </div>
                    <%--新增记录 只需输入后勤的id即可--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">logisticsName</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="logisticsName" id="logistic_add_select">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">修缮说明</label>
                        <div class="col-sm-10">
                            <div class="col-sm-10">
                                <input type="text" name="reRemark" class="form-control" id="reRemark_add_input" placeholder="reRemark">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">修缮时间</label>
                        <div class="col-sm-10">
                            <div class="col-sm-10">
                                <input type="text" name="reTime" class="form-control" id="reTime_add_input" placeholder="logisticsId">
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                <button type="button" class="btn btn-primary" id="record_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="recordUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">编辑修缮记录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/recordController/updateRecord" method="post">

                    <input type="hidden" name="reId" class="form-control" id="recordId_update_input" placeholder="recordId">


                    <div class="form-group">
                        <label class="col-sm-2 control-label">houseRoomno</label>
                        <div class="col-sm-10">
                            <input type="text" name="houseRoomno" class="form-control" id="houseRoomno_update_input" placeholder="houseRoomno">
                        </div>
                    </div>
                    <%--新增记录 只需输入后勤的id即可--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">logisticsName</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="logisticsName" id="logistic_update_select">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">修缮说明</label>
                        <div class="col-sm-10">
                            <div class="col-sm-10">
                                <input type="text" name="reRemark" class="form-control" id="reRemark_update_input" placeholder="reRemark">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">修缮时间</label>
                        <div class="col-sm-10">
                            <div class="col-sm-10">
                                <input type="text" name="reTime" class="form-control" id="reTime_update_input" placeholder="logisticsId">
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                <button type="button" class="btn btn-primary" id="record_update_btn">修改</button>
            </div>
        </div>
    </div>
</div>

<%--<a href="emp/GetAll">select</a><br>
<a href="emp/getAll2">select22</a><br>
<a href="emp/delete">delete</a><br>
<a href="emp/update">delete</a><br>--%>

<!-- 显示页面  使用 bootstrap -->



<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12"><h1>房屋修缮记录</h1></div>
    </div>
    <!--按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="record_add_model_btn">新增</button>
            <%--查询--%>
        </div>
        <%--不用ajax返回  session拿到数据 怎么把数据显示出来呢 调=跳转页面吗 --%>
        <form>
            <div>
                查询修缮信息:<input type="text" name="selectString" value="" id="select_input" placeholder="">
                <label>
                    <button type="button" id="record_select_btn">查询</button>
                </label>
            </div>
        </form>
    </div>
    <!-- 显示表格数据-->
    <table class="table table-bordered" id="records_table">
        <thead>
        <tr>
            <td>id</td>
            <%--把房屋的哪些信息显示出来呢 地址 房间号--%>
            <td>房屋地址</td>
            <td>房间号</td>
            <%--后勤人员的名字和电话--%>
            <td>修缮负责人</td>
            <td>负责人电话</td>
            <td>修缮说明</td>
            <td>修缮时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody >


        </tbody>
    </table>
    <div class = "row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area">

        </div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">

        </div>

    </div>
</div>
</body>
<script type="text/javascript">
    /*
    * 函数使用ajax把数据显示出
    *
    * */
    /*function del() {
        if(!confirm("确认要删除？")){
            window.event.returnValue = false;
        }*/
    $(function () {
        //删除
        $(document).on("click",".delete_btn",function () {
            //清空信息
            //模态框的数据提交进行保存
            $.ajax({
                url:"${pageContext.request.contextPath}/recordController/deleteReord",
                type:"POST",
                data:{"reId":$(this).attr("delete_id")},
                success:function (result) {
/*
                    del();
*/
                },
                error:function(d,errorThrown){
                    alert("失败");
                    alert(d.status);
                    alert(d.readyState);
                    alert(errorThrown);
                }
            });


        });



        //查询发送请求 点击发送吗要
        $("#record_select_btn").click(function () {
            alert("查询数据");
            $.ajax({
                url:"${pageContext.request.contextPath}/recordController/selectRecords",
                data:{"select_input":$("#select_input").val()},
                type:"POST",
                success:function (result) {
                    console.log(result);
                    build_records_table(result);
                    //分页文字信息
                    build_page_info(result);
                    //解析并显示分页数据
                    build_page_nav(result);
                },
                error:function(d,errorThrown){
                    alert("失败");
                    alert(d.status);
                    alert(d.readyState);
                    alert(errorThrown);
                }
            });
        });


        $.ajax({
                url:"${pageContext.request.contextPath}/recordController/getAll",
                data:"pn=1",
                type:"get",
                success:function (result) {
                    //解析并显示员工数据
                    build_records_table(result);
                    //分页文字信息
                    build_page_info(result);
                    //解析并显示分页数据
                    build_page_nav(result);
                }
            }
        );
        //获取后勤人员
        $.ajax({
            url:"${pageContext.request.contextPath}/recordController/getAllLogistics",
            type:"GET",
            success:function (result) {
                //ajax怎么返回
                $.each(result.extend.logistics,function () {

                    var optionEle=$("<option></option>").append(this.loName);
                    optionEle.appendTo($("#logistic_add_select"));
                });
            },
            error:function(d,errorThrown){
                alert("失败");
                alert(d.status);
                alert(d.readyState);
                alert(errorThrown);
            }
        });


        //修改保存record
        $("#record_save_btn").click(function () {
            //模态框的数据提交进行保存
            alert("ajax添加record");
            $.ajax({
                url:"${pageContext.request.contextPath}/recordController/addRecord",
                type:"POST",
                data:$("#recordAddModal form").serialize(),
                success:function (result) {
                    //ajax怎么返回
                    alert(result.msg);

                },
                error:function(d,errorThrown){
                    alert("失败");
                    alert(d.status);
                    alert(d.readyState);
                    alert(errorThrown);
                }

            });
        })

        //编辑记录
        $(document).on("click",".edit_btn",function () {
            //清空信息
            $("#empUpdateModel select").empty();
            //模态框的数据提交进行保存
            $.ajax({
                url:"${pageContext.request.contextPath}/recordController/getAllLogistics",
                type:"GET",
                success:function (result) {
                    //ajax怎么返回
                    $.each(result.extend.logistics,function () {
                        var optionEle=$("<option></option>").append(this.loName);
                        optionEle.appendTo($("#recordUpdateModal select"));
                    });
                },
                error:function(d,errorThrown){
                    alert("失败");
                    alert(d.status);
                    alert(d.readyState);
                    alert(errorThrown);
                }
            });
            //查出后勤人员信息(根据id) ,显示后勤人员列表
            getRecord($(this).attr("edit_id"))
            //弹出模态框
            $("#recordUpdateModal").modal({
                backdrop:"static"
            });

        });

        function getRecord(id) {
            $.ajax({
                url:"${pageContext.request.contextPath}/recordController/getRecord/"+id,
                type:"GET",
                success:function (result) {
                    //alert("执行topage");
                    //1.解析并显示员工数据
                    console.log(result);
                    var recordData = result.extend.record;
                    $("#logistic_update_select").val(recordData.logistics.loName);
                    $("#houseRoomno_update_input").val(recordData.house.hRoomno);
                    $("#reRemark_update_input").val(recordData.reRemark);
                    $("#reTime_update_input").val(recordData.reTime);
                    $("#recordId_update_input").val(recordData.reId);

                },
                error:function(d,errorThrown){
                    alert("失败");
                    alert(d.status);
                    alert(d.readyState);
                    alert(errorThrown);
                }
            });
        }
        $("#record_add_model_btn").click(function () {
            alert("000000");
            $("#recordAddModal").modal({
                backdrop:"static"
            });
        });
    })
    //解析显示员工数据
    function to_page(pn) {
        $.ajax({
            url:"${pageContext.request.contextPath}/recordController/getAll",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                //alert("执行topage");
                //1.解析并显示员工数据
                build_records_table(result);
                build_page_info(result);
                build_page_nav(result)
            }
        });
    }

    function build_records_table(result) {
        $("#records_table tbody").empty();
        var emps=result.extend.pageInfo.list;
        $.each(emps,function (index,item) {
            //alert(item.empName);
            var recordIdTd= $("<td></td>").append(item.reId);
            var houseAreaTd= $("<td></td>").append(item.house.hArea);
            var houseRoomnoTd= $("<td></td>").append(item.house.hRoomno);
            var logisticsNameTd= $("<td></td>").append(item.logistics.loName);
            var logisticsTelTd = $("<td></td>").append(item.logistics.loTel);
            var recordMarkTd = $("<td></td>").append(item.reRemark);
            var recordUpdateTimeTd = $("<td></td>").append(item.reTime);
            var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-pencil ")
                .append("编辑");
            editBtn.attr("edit_id",item.reId);
            var delBtn=$("<button></button>").addClass("btn btn-primary btn-sm delete_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-pencil")
                .append("删除");
            delBtn.attr("delete_id",item.reId);
            var btnTd=$("<td></td>").append(editBtn).append(delBtn);
            $("<tr></tr>")
                .append(recordIdTd)
                .append(houseAreaTd)
                .append(houseRoomnoTd)
                .append(logisticsNameTd)
                .append(logisticsTelTd)
                .append(recordMarkTd)
                .append(recordUpdateTimeTd)
                .append(btnTd)
                .appendTo("#records_table tbody");
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第" + result.extend.pageInfo.pageNum + "页,总共"+
            result.extend.pageInfo.pages +"页,总共" + result.extend.pageInfo.total + "条记录" );
    }

    //解析显示分页条
    function build_page_nav(result) {
        $("#page_nav_area").empty();
        // alert(result)
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
        if(result. extend. pageInfo. hasPreviousPage==false ){
            firstPageLi . addClass("disabled");
            prePageLi. addClass("disabled");
        }else{
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum-1);
            });
            firstPageLi.click(function () {
                to_page(1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append(" &raquo;").attr("href", "#"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else {
            nextPageLi.click(function () {
                alert("下一页点击执行");
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }
        ul.append(firstPageLi).append(prePageLi);
        //result. extend. pageInfo . navigatepageNums为什么是这样子，看返回的json数据类型就可以了
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
            if (result.extend.pageInfo.pageNum==item){
                numLi.addClass("actice");
            }

            numLi.click(function () {
                to_page(item);
            })
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        //把ul添加到nav
        var navEle=$("<nav></nav>") .append(ul);
        navEle.appendTo("#page_nav_area");

    }

    //修改
    $("#record_update_btn").click(function () {
        //模态框的数据提交进行保存
        $.ajax({
            url:"${pageContext.request.contextPath}/recordController/updateRecord",
            type:"POST",
            data:$("#recordUpdateModal form").serialize(),
            success:function (result) {
                //ajax怎么返回
                alert(result.msg);

            },
            error:function(d,errorThrown){//失败的时候要执行的函数
                alert("失败");
                alert(d.status);
                alert(d.readyState);
                alert(errorThrown);
            }

        });
    })


</script>

</body>
</html>